<script setup lang="ts">
import { Router, useRouter } from "vue-router";
import { ImagePreview, Toast } from "vant";
import type { Message, Prescription } from "@/types/chitchatTypes/chitchatTypes.ts";
import { IllnessTime, MsgType, PrescriptionStatus } from "@/enums";
import { flagOptions, timeOptions } from "@/constants";
import { Image } from "@/types/consultTypes/consultTypes.ts";
import useUserStore from "@/pinia/modules/userStore/userStore.ts";
import dayjs from "dayjs";
import EvaluateCard from "@/views/home/views/chitchat/components/evaluateCard.vue";
import useConsultStore from "@/pinia/modules/consultStore/consultStore.ts";
import { useLookPre } from "@/hooks/useLookPre.ts";


defineProps<{
   list: Message[]
}>();

const userStore = useUserStore();

const consultStore = useConsultStore();

const router: Router = useRouter();
const getIllnessTimeText = (time: IllnessTime) => timeOptions.find((item) => item.value === time)?.label;


const getConsultFlagText = (flag: 0 | 1) => flagOptions.find((item) => item.value === flag)?.label;

const previewImage = (pictures: Image[] | undefined) => {
   if (pictures && pictures.length) {
      ImagePreview(pictures.map((item) => item.url));
   } else {
      Toast.fail("没有上传病情图片");
   }
};

const loadSuccess = () => {
   window.scrollTo(0, document.body.scrollHeight);
};


const lookPre = async (id: string) => {
/*   try {
      const url: string = await consultStore.fetchPrescriptionPic(id);
      ImagePreview([url]);
   } catch (error: any) {
      Toast.fail(error.message);
   }*/
  await useLookPre(id)
};


const goPay = (prescription: Prescription) => {
   if (prescription) {
      if (prescription.status === PrescriptionStatus.Invalid) return Toast.fail("处方失效");
      if (prescription.status === PrescriptionStatus.NotPayment) return router.push({ path: "/medicine/pay", query: { id: prescription.id } });
   }
};

const formatTime = (time: string) => dayjs(time).format("HH:mm");

</script>

<template>
   <div class="room-message">
      <template v-for="{id, msgType, msg, createTime, from,fromAvatar } in list" :key="id">
         <!-- 病情描述 -->
         <div class="msg msg-illness" v-if="msgType === MsgType.CardPat">
            <div class="patient van-hairline--bottom" v-if="msg.consultRecord">
               <p>{{ msg.consultRecord.patientInfo.name }} {{ msg.consultRecord.patientInfo.genderValue }} {{ msg.consultRecord.patientInfo.age }}岁</p>
               <p>{{ getIllnessTimeText(msg.consultRecord.illnessTime) }} | {{ getConsultFlagText(msg.consultRecord.consultFlag) }}</p>
            </div>
            <van-row>
               <van-col span="5">病情描述:</van-col>
               <van-col span="18">{{ msg.consultRecord?.illnessDesc }}</van-col>
               <van-col span="5">详细图片:</van-col>
               <van-col span="18" @click="previewImage(msg.consultRecord?.pictures)">点击查看</van-col>
            </van-row>
         </div>

         <!-- 温馨提示 -->
         <div class="msg msg-tip" v-if="msgType === MsgType.NotifyTip">
            <div class="content">
               <span class="green">温馨提示：</span>
               <span>{{ msg.content }}</span>
            </div>
         </div>

         <!-- 通用通知 -->
         <div class="msg msg-tip" v-if="msgType === 31">
            <div class="content">
               <span>{{ msg.content }}</span>
            </div>
         </div>

         <!-- 我发的消息 -->
         <div class="msg msg-to" v-if="msgType === MsgType.MsgText && userStore.userInfo?.id === from">
            <div class="content">
               <div class="time">{{ formatTime(createTime) }}</div>
               <div class="pao">{{ msg.content }}</div>
            </div>
            <van-image :src="userStore.userInfo?.avatar" />
         </div>

         <!-- 医生发的消息 -->
         <div class="msg msg-from" v-if="msgType === MsgType.MsgText && userStore.userInfo?.id !== from">
            <van-image :src="fromAvatar" />
            <div class="content">
               <div class="time">{{ formatTime(createTime) }}</div>
               <div class="pao">{{ msg.content }}</div>
            </div>
         </div>

         <!--发送图片-->
         <div class="msg msg-to" v-if="msgType === MsgType.MsgImage && userStore.userInfo?.id === from">
            <div class="content">
               <div class="time">{{ formatTime(createTime) }}</div>
               <van-image fit="contain" :src="msg.picture?.url" @load="loadSuccess()" />
            </div>
            <van-image :src="userStore.userInfo?.avatar" />
         </div>

         <!--接收图片-->
         <div class="msg msg-from" v-if="msgType === MsgType.MsgImage && userStore.userInfo?.id !== from">
            <van-image :src="fromAvatar" />
            <div class="content">
               <div class="time">{{ formatTime(createTime) }}</div>
               <van-image fit="contain" :src="msg.picture?.url" @load="loadSuccess()" />
            </div>
         </div>

         <!-- 关闭问诊-->
         <div class="msg msg-tip msg-tip-cancel" v-if="msgType === MsgType.NotifyCancel">
            <div class="content">
               <span>{{ msg.content }}</span>
            </div>
         </div>

         <!--医生评价-->
         <div class="msg msg-comment" v-if="msgType === MsgType.CardEva || msgType === MsgType.CardEvaForm">
            <evaluateCard :evaluateDoc="msg.evaluateDoc"></evaluateCard>
         </div>

         <!-- 处方卡片 -->
         <div class="msg msg-recipe" v-if="msgType===MsgType.CardPre">
            <div class="content">
               <div class="head van-hairline--bottom">
                  <div class="head-tit">
                     <h3>电子处方</h3>
                     <p @click="lookPre(msg!.prescription!.id)">原始处方
                        <van-icon name="arrow"></van-icon>
                     </p>
                  </div>
                  <p> {{ msg.prescription!.name }} {{ msg.prescription!.genderValue }} {{ msg.prescription!.age }}岁 {{ msg.prescription!.diagnosis }}</p>
                  <p>开方时间:{{ msg.prescription!.createTime }}</p>
               </div>
               <div class="body">
                  <div class="body-item" v-for="med in msg.prescription!.medicines" :key="med.id">
                     <div class="durg">
                        <p>{{ med.name }} {{ med.specs }}</p>
                        <p>{{ med.usageDosag }}</p>
                     </div>
                     <div class="num">x{{ med.quantity }}</div>
                  </div>
               </div>
               <div class="foot" @click="goPay(msg.prescription!)"><span>购买药品</span></div>
            </div>
         </div>


      </template>
   </div>

</template>


<style lang="scss" scoped>
@import '@/styles/room.scss';

.room-message {
   padding-top: 50px;
}
</style>
